<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>{{ title }} - 文件浏览</title>
    <style>
        body { font-family: Arial; margin: 20px; }
        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
        th, td { padding: 4px; border-bottom: 1px solid #ddd; text-align: left; }
        th { background-color: #f2f2f2; }

        .preview-link {
            padding: 8px 0px; /* 调整 padding 大小 */
            display: inline-block;
            height: 100%;
            line-height: normal;
            box-sizing: border-box;
        }

        .img-preview {
            max-width: 90%; /* 最大宽度 */
            width: auto;
            height: auto;
            display: block;     /* 避免行内空隙 */
            margin: 0 auto;     /* 居中 */
            cursor: pointer;
            border: 1px solid #ccc;  /* 细灰边框 */
            border-radius: 4px;      /* 可选：圆角更柔和 */
        }

        .text-preview { white-space: pre-wrap;
            white-space: pre-wrap; /* 保留空格和换行 */
            background: #f9f9f9; /* 浅灰色背景 */
            padding: 10px; /* 内边距 */
            overflow-y: auto; /* 超出部分显示垂直滚动条 */
            text-align: left; /* 左对齐文本 */
            min-height: 50px; /* 设置最小高度，可根据需要调整 */
            height: auto; /* 高度自适应内容 */
            box-sizing: border-box; /* 包括边框和内边距在内的盒子大小 */
            margin: 0 auto; /* 水平居中 */
        }
        .back { margin-bottom: 20px; }

        .qr-cell   { position: relative; }         /* 让大二维码相对单元格定位 */
        .qr-thumb  { width: 40px; height: 40px; cursor: pointer; }
        .qr-large  {
            position: absolute;
            top: 0;
            right: 100%;          /* 从单元格左侧弹出 */
            width: 200px; height: 200px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-shadow: 0 2px 8px rgba(0,0,0,.15);
            opacity: 0;
            visibility: hidden;
            transition: opacity .15s, visibility .15s;
            z-index: 10;
        }
        .qr-wrap:hover .qr-large {
            opacity: 1;
            visibility: visible;
        }
    </style>
</head>
<body>
    <div class="back">
        <a href="./">← 返回上传页</a> |
        <strong>今日文件列表：</strong> {{ date }}
    </div>

    <table>
        <thead>
            <tr>
                <th>文件名</th>
                <th>类型</th>
                <th>大小</th>
                <th>上传时间</th>
                <th>操作</th>
                {% if allow_download %}
                    <th>二维码</th>
                {% endif %}
            </tr>
        </thead>
        <tbody>
        {% for f in files %}
            <tr>
                <td>{{ f.name }}</td>
                <td>{{ f.type }}</td>
                <td>{{ f.size }}</td>
                <td>{{ f.time }}</td>

                <td>
                    {% if allow_download %}
                        <a href="./uploads/{{ date }}/{{ f.name }}" download>下载</a> |
                    {% endif %}

                    {% if f.is_text %}
                        <a href="javascript:void(0)" class="preview-link" onclick="previewText('{{ date }}/{{ f.name }}')">预览</a>
                    {% elif f.is_image %}
                        <a href="javascript:void(0)" class="preview-link" onclick="previewImage('{{ date }}/{{ f.name }}')">预览</a>
                    {% elif f.is_pdf %}
                        <a href="javascript:void(0)" class="preview-link" onclick="previewPDF2('{{ date }}/{{ f.name }}')">预览</a>
                    {% elif f.is_office %}
                        <a href="javascript:void(0)" class="preview-link" onclick="previewOffice('{{ date }}/{{ f.name }}')">预览</a>
                    {% else %}
                        {% if not allow_download %}
                            <span class="preview-link">　　</span>
                        {% endif %}
                    {% endif %}
                </td>

                {% if allow_download %}
                    <td class="qr-cell">
                        <span class="qr-wrap">
                            <a href="{{request.host_url}}generate_qr_code/{{ url_for('uploaded_file', filename=date + '/' + f.name, _external=True) }}"
                               target="_blank">
                                <img src="{{request.host_url}}generate_qr_code/{{ url_for('uploaded_file', filename=date + '/' + f.name, _external=True) }}"
                                     alt="二维码" class="qr-thumb">
                            </a>
                            <img class="qr-large"
                                 src="{{request.host_url}}generate_qr_code/{{ url_for('uploaded_file', filename=date + '/' + f.name, _external=True) }}">
                        </span>
                    </td>
                 {% endif %}
            </tr>
        {% endfor %}
        </tbody>
    </table>

    <div id="preview" style="margin-top: 20px;"></div>

    <script>
        function previewText(path) {
            fetch('./uploads/' + path)
            .then(r => r.text())
            .then(t => {
                const txt = t.trim();
                if (txt) {
                    const parser = new DOMParser();
                    const htmlDoc = parser.parseFromString('<!doctype html><html><body>' + t + '</body></html>', 'text/html');
                    const content = htmlDoc.body.textContent.trim();
                    document.getElementById('preview').innerHTML = '<h3>文本预览：</h3><div class="text-preview">' + content + '</div>';
                } else {
                    const content = '（文件为空或仅包含空白字符）';
                    document.getElementById('preview').innerHTML = '<h3>文本预览：</h3><div class="text-preview">'+content+'</div>';
                }
            });
        }
        function previewImage(path) {
            document.getElementById('preview').innerHTML = '<h3>图片预览：</h3><img class="img-preview" src="./uploads/'+path+'">';
        }

        function previewPDF(path) {
            // 获取视口高度
            const viewportHeight = window.innerHeight;

            // 获取已用高度（例如：顶部导航栏和标题的高度）
            const usedHeight = document.querySelector('.back').offsetHeight +
                               document.querySelector('table').offsetHeight +
                               20; // 20px 是 #preview 上的 margin-top

            // 计算 embed 高度
            var embedHeight = viewportHeight - usedHeight;
            embedHeight = embedHeight > 600 ? embedHeight : 600

            const pdfPreview = `
                <h3>PDF预览：</h3>
                <div style="position: relative;">
                    <object data="./previewPDF/${path}" type="application/pdf" width="100%" height="${embedHeight}px">
                        <p>您的浏览器不支持嵌入 PDF 查看器。</p>
                    </object>
                    <div style="
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%) rotate(-45deg);
                        color: rgba(200, 200, 200, 0.2);
                        font-size: 48px;
                        font-weight: bold;
                        pointer-events: none;
                        z-index: 100;
                        white-space: nowrap;
                    ">内部文件 仅限预览</div>
                </div>
            `;
            document.getElementById('preview').innerHTML = pdfPreview;
        }

        function previewPDF2(path) {
            // 获取视口高度
            const viewportHeight = window.innerHeight;

            // 获取已用高度（例如：顶部导航栏和标题的高度）
            const usedHeight = document.querySelector('.back').offsetHeight +
                               document.querySelector('table').offsetHeight +
                               20; // 20px 是 #preview 上的 margin-top

            // 计算 embed 高度
            var embedHeight = viewportHeight - usedHeight;
            embedHeight = embedHeight > 600 ? embedHeight : 600;

            // 构造 PDF 文件的完整路径
            const pdfUrl = window.location.href.substring(0, window.location.href.lastIndexOf('/') + 1) + `/uploads/${path}`;

            // 使用 PDF.js viewer 来显示 PDF，同时保持自适应高度
            const pdfPreview = `
                <h3>PDF预览：</h3>
                <div style="position: relative;">
                    <iframe src="../pdfjs/web/viewer.html?file=${encodeURIComponent(pdfUrl)}"
                            style="width:100%;height:${embedHeight}px;border:none;"
                            frameborder="0">
                        <p>您的浏览器不支持嵌入 PDF 查看器。</p>
                    </iframe>
                    <div style="
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%) rotate(-45deg);
                        color: rgba(200, 200, 200, 0.2);
                        font-size: 48px;
                        font-weight: bold;
                        pointer-events: none;
                        z-index: 100;
                        white-space: nowrap;
                    ">内部文件 仅限预览</div>
                </div>
            `;
            document.getElementById('preview').innerHTML = pdfPreview;
        }

        function previewOffice(path) {
            document.getElementById('preview').innerHTML = '<h3>Office文档预览：</h3><iframe src="./previewOffice/' + path + '" style="width:100%;height:800px;border:none;"></iframe>';
        }
    </script>
</body>
</html>
